<template>
	<view>
		<view class="is-null" v-if="addressList.length == 0">
			<view class="img">
				<image :src="nullImg"></image>
			</view>
			<view class="text">
				<text>暂无地址信息</text>
			</view>
		</view>
		<view class="address" v-else>
			<radio-group @change="changeRadio">
				<view class="con" v-for="(item,index) in addressList" :key="index">
					<view class="box">
						<view class="top" @click="choiceAddress(item)">
							<view class="name">
								<text>{{item.name}}</text>
							</view>
							<view class="phone">
								<text>{{item.phone}}</text>
							</view>
						</view>
						<view class="center" @click="choiceAddress(item)">
							<!-- {{parseInt(item.isDefault) == 1}} -->
							<view class="def-view" v-if="parseInt(item.isDefault) == 1">
								<text>默认</text>
							</view>
							<view class="text">
								<text>{{item.address}}</text>
							</view>
						</view>
						<view class="bottom">
							<view class="left">
								<radio style="transform: scale(0.7);" color="rgba(7, 193, 96, 1)"
									:value="JSON.stringify(item)" :checked="parseInt(item.isDefault) == 1">
								</radio>
								<text>默认地址</text>
							</view>
							<view class="right">
								<view class="remove-img">
									<image :src="removeImg" @click="removeAddressById(item.addressId)"></image>
								</view>
								<view class="update-img">
									<image :src="updateImg" @click="updateAddressById(item)"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</radio-group>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['addressList'],
		data() {
			return {
				radioValue: '',
				removeImg: require('@/static/img/main/my/commonly/address/01.svg'),
				updateImg: require('@/static/img/main/my/commonly/address/02.svg'),
				nullImg: require('@/static/img/common/null_address.svg')
			}
		},
		methods: {
			changeRadio(e) {
				//console.log(e.detail)
				var changeItem = JSON.parse(e.detail.value)
				this.$emit('changeRadio', changeItem)
			},
			choiceAddress(item) {
				//console.log('选择地址')
				this.$emit('choiceAddress', item)
			},
			//删除地址
			removeAddressById(addressId) {
				this.$emit('removeAddressById', addressId)
			},
			//修改地址信息
			updateAddressById(item) {
				this.$emit('updateAddressById', item)
			}
		}
	}
</script>

<style scoped lang="scss">
	.is-null {
		.img {
			image {
				width: 100%;

			}
		}

		.text {
			text-align: center;
			font-size: 36rpx;
			color: #A1A1A1;
		}
	}

	.address {
		width: 100%;
	}

	.con {
		margin: 30rpx 0;
		background: #fff;
		width: 100%;

		.box {
			width: 92%;
			margin-left: 4%;
			padding: 20rpx 0;

		}

	}


	.top {
		display: flex;
		justify-content: space-between;

		text {
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);
		}
	}

	.center {
		// margin: 10rpx 0;
		display: flex;
		height: 100rpx;

		.def-view {
			width: 90rpx;
			height: 50rpx;
			margin-top: 25rpx;
			line-height: 45rpx;
			border-radius: 50rpx;
			border: 1rpx solid rgba(10, 163, 71, 1);
			text-align: center;
			margin-right: 20rpx;

			text {
				font-size: 20rpx;
				font-weight: 400;
				color: rgba(10, 163, 71, 1);


			}
		}

		.text {
			line-height: 100rpx;

			text {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);

				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				overflow: hidden;
				word-break: break-all;
				/* break-all(允许在单词内换行。) https://www.w3school.com.cn/cssref/pr_word-break.asp*/
				text-overflow: ellipsis;
				/* 超出部分省略号 */
				-webkit-box-orient: vertical;
				/** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 1;
				/** 显示的行数 **/
			}
		}

	}

	.bottom {
		display: flex;
		justify-content: space-between;

		.left {
			text {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
			}
		}

		.right {
			display: flex;

			image {
				width: 45rpx;
				height: 45rpx;
				margin-left: 15rpx;
			}
		}
	}
</style>
